<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>文件上传下载演示页面</title>
    <!--使用链接表达式/开头 相对项目根路径-->
    <link rel="stylesheet" th:href="@{/phoebe/css/common.css}" href="">
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  
</head>
<body>
<h1>文件上传流程演示</h1>
<div>
    <form th:action="@{/product/addProduct}" enctype="multipart/form-data" method="post">
        <label>产品名字： <input type="text" name="name"> </label><br>
        <label>产品图片： <input type="file" name="imgFile"> </label><br>
        <label>使用说明： <input type="file" name="useFile"></label><br>
        <input type="submit" value="提交"><br>
    </form>
</div>
</body>
</html>

        <!--在上面的代码段中,我们在页面上添加了一个表单，用于添加新产品信息，
        因为需要使用表单上传文件，所以表单的 method 属性需要设置为 post
        且enctype 必须是 multipart/form-data，
        使用 file 类型的 input 标记显示一个用于选择上传文件的组件,使用一个提交按钮提交表单中所有字段.-->
<!--        enctype就是encodetype就是编码类型的意思。-->
<!--        multipart/form-data是指表单数据中由多部分构成，既有文本数据，又有文件等二进制数据-->
<!--        需要注意的是：默认情况下，enctype的值是application/x-www-form-urlencoded,不能用于多类型文件上传，只有使用了multipart/form-data，才能完整的传递文件数据。-->
<!--        application/x-www-form-urlencoded不是不能上传文件，是只能上传文本格式的文件，multipart/form-data是将文件以二进制的形式上传，这样可以实现多种类型的文件上传。-->